<template>
  <div id="count-box">
    <div class="count-out-box">
      <div class="count-box">
        <div class="flex">
          <div class="count-item" v-for="item in countData" :key="item.id">
            <div class="count">
              {{ item.count | NumToUnitNum }} {{ item.count | GetUnit }}
            </div>
            <div class="count-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CountBox",
  props: ["countData"],
};
</script>

<style lang='less'>
#count-box {
  .count-out-box {
    display: flex;
    justify-content: center;
    .count-box {
      background: #fff;
      margin-top: 10px;
      display: inline-block;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 2px 0px 10px -5px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 2px 0px 10px -5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 2px 0px 10px -5px rgba(0, 0, 0, 0.3);
      .flex {
        display: flex;
        .count-item {
          margin: 0 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .count {
            font-size: 16px;
          }
          .count-name {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>